<template>
    <div class="sales-detail-main">
        <van-nav-bar left-arrow @click-left="onClickLeft">
            <template #left>
                <van-icon :name="backicon" size="20"/>
            </template>
            <template #title>
                <span class="hometitle">售后详情</span>
            </template>
        </van-nav-bar>
        <div class="asales-header">
            <p>申请时间：<span class="header-num">{{Obj.add_time | formateDate}}</span></p>
            <p>退换单号：<span class="header-num">{{Obj.refund_sn}}</span></p>
        </div>
        <div class="class-template" style="border-bottom:1px solid #ccc">
            <h4>售后详情</h4>
            <van-cell-group>
                <van-cell title="订单编号">
                    <template #default>
                        <span style="font-family: 'DINPro Medium';">{{Obj.orders.order_sn}}</span>
                    </template>
                </van-cell>
                <van-cell title="售后类型" :value="Obj.refund_cate==1?'退货':'换货'" />
                <van-cell title="售后原因" :value="Obj.reason" />
            </van-cell-group>
        </div>
        <div class="class-template">
            <h4>审核信息</h4>
            <van-cell-group>
                <van-cell title="审核状态" value="已驳回" v-if="Obj.status==-1" />
                <van-cell title="审核状态" value="审核中" v-if="Obj.status==0" />
                <van-cell title="审核状态" value="已通过" v-if="Obj.status>0" />
                <van-cell title="申请时间">
                    <template #default>
                        <span style="font-family: 'DINPro Medium';">{{Obj.add_time | formateDate}}</span>
                    </template>
                </van-cell>
            </van-cell-group>
            <div class="btn-group">
                <span class="jumptufill" v-if="Obj.status==1" @click="Jumpto({path:'/AfterSalesDetails',query:{reid:item.refund_id}})">填写物流</span>
                <span class="jumptufill jumptufill-999" v-if="Obj.status==2" >已寄回</span>
            </div>
        </div>

        <!-- 已驳回 -->
        <div class="reject-template" v-if="Obj.status==-1">
            <h4>驳回原因</h4>
            <div class="reject-cause">
                {{Obj.cause}}
            </div>
        </div>

        <!-- 换货 -->
        <div class="class-template" v-if="Obj.status==2">
            <h4>物流信息</h4>
            <van-cell-group>
                <van-cell title="寄件人" :value="Obj.user_name" />
                <van-cell title="电话">
                    <template #default>
                        <span style="font-family: 'DINPro Medium';">{{Obj.user_mobile}}</span>
                    </template>
                </van-cell>
                <van-cell title="物流公司" :value="Obj.log_name" />
                <van-cell title="物流单号">
                    <template #default>
                        <span style="font-family: 'DINPro Medium';">{{Obj.log_sn}}</span>
                    </template>
                </van-cell>
                <van-cell title="寄件时间">
                    <template #default>
                        <span style="font-family: 'DINPro Medium';">{{Obj.seller_send_time}}</span>
                    </template>
                </van-cell>
            </van-cell-group>
        </div>


        <div class="class-template" v-if="Obj.status>2&&Obj.status<5">
            <h4>换货详情</h4>
            <van-cell-group>
                <van-cell title="配送公司" :value="Obj.seller_log_name" />
                <van-cell title="配送单号">
                    <template #default>
                        <span style="font-family: 'DINPro Medium';">{{Obj.seller_log_sn}}</span>
                    </template>
                </van-cell>
                <van-cell title="配送状态" value="配送中" />
                <van-cell title="配送时间">
                    <template #default>
                        <span style="font-family: 'DINPro Medium';">{{Obj.seller_send_time}}</span>
                    </template>
                </van-cell>
                <!-- <van-cell title="换货状态" value="已完成" /> -->
            </van-cell-group>
            <van-divider :style="{ color: '#ccc' ,margin:'10px auto'}"/>
            <van-cell-group class="changestatus">
                <van-cell title="换货状态" value="已完成" />
            </van-cell-group>
            <!-- <p></p> -->
            <!-- <div class="btn-group">
                <span class="jumptufill" @click="Jumpto({path:'/orderDetail',query:{oid:Obj.orders.order_id}})">查看订单</span>
            </div> -->
        </div>

        <!-- 退货 -->
        <!-- <div class="class-template" v-if="true">
            <h4>物流信息</h4>
            <van-cell-group>
                <van-cell title="寄件人" value="尚先生" />
                <van-cell title="电话">
                    <template #default>
                        <span style="font-family: 'DINPro Medium';">188 4444 4444</span>
                    </template>
                </van-cell>
                <van-cell title="物流公司" value="顺丰快递" />
                <van-cell title="物流单号">
                    <template #default>
                        <span style="font-family: 'DINPro Medium';">12345648464646</span>
                    </template>
                </van-cell>
                <van-cell title="寄件时间">
                    <template #default>
                        <span style="font-family: 'DINPro Medium';">2020-03-02 18:20:01</span>
                    </template>
                </van-cell>
            </van-cell-group>
        </div> -->
        <div class="class-template" v-if="Obj.status==5">
            <h4>退款详情</h4>
            <van-cell-group>
                <van-cell title="退款金额" style="color:#333;">
                    <template #default>
                        <span style="font-family: 'DINPro Medium';">- ￥ {{Obj.order_money}}</span>
                    </template>
                </van-cell>
                <van-cell title="退款方式" value="原路退回" />
                <van-cell title="退款时间">
                    <template #default>
                        <span style="font-family: 'DINPro Medium';">{{Obj.add_time2 | formateDate}}</span>
                    </template>
                </van-cell>
                <van-cell title="退款状态" value="已完成" />
            </van-cell-group>
        </div>
        <!-- 退货中 -->


    </div>
</template>
<script>
import {_refundOrderInfo} from '../../service/order'

// 'REFUND_STATUS'=>array(
//     -2 => '服务单取消',//会员取消
//     -1 => '审核失败',//不同意
//     0  => '待审核',//卖家审核
//     1  => '审核通过',//同意
//     2  => '买家发货',//买家发货
//     3  => '已收货',//服务单完成
//     4  => '换货完成',
//     5  => '退款完成',
// ),
const saleStatus={
    '-2':'服务单取消',
    '-1':'审核失败',
    '0':'待审核',
    '1':'审核通过',
    '2':'买家发货',
    '3':'已收货',
    '4':'换货完成',
    '5':'退款完成',
}
export default {
    data(){
        return{
            backicon:require('../../assets/img/backicon.png'),
            reject:false,
            huanhuo:false,
            tuihuo:false,
            Obj:{},
        }
    },
    mounted(){
        this.getData()
    },
    filters:{
        formateDate(time){
            return moment(Number(time)*1000).format('YYYY-MM-DD HH:mm:ss')
        },
        changePhone(val){
            if(val!=undefined){
                return val.replace(/(^\d{3}|\d{4}\B)/g,"$1 ");
            }
        }
    },
    methods:{
        onClickLeft(){
            this.$router.push("/own")
        },
        getData(){
            let _this=this
            let reid=this.$route.query.reid
            let uid=JSON.parse(localStorage.getItem("user")).user_id
            _refundOrderInfo({
                user_id:uid,
                refund_id:reid
            }).then(res=>{
                console.log(res)
                if(res.errcode==1){
                    this.Obj=res.data
                }else{

                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.font-SC(){
    font-family: "PingFang SC","Microsoft YaHei";
}
.sales-detail-main{
    width: 100%;
    height: 100vh;
    background-color: #f8f8f8;
    overflow-y: auto;
    .hometitle{
        font-size: 18px;
        .font-SC();
        font-weight: bold;
        color: #000;
        line-height: 46px;
    }
    .asales-header{
        width: 100%;
        padding: 10px 10px 0 10px;

        p{
            .font-SC();
            font-size: 12px;
            color: #999;
            line-height: 15px;
            padding-left: 5px;
            .header-num{
                font-family: "DINPro Medium";
                letter-spacing: .1em;
            }
            &:last-child{
                color: #f26e6e;
            }
        }
    }
    .class-template{
        width: 100%;
        height: auto;
        padding: 15px;
        margin: 15px 0;
        background-color: #fff;
        h4{
            .font-SC();
            font-weight: bold;
            font-size: 15px;
            color: #333;
        }
        /deep/.van-cell{
            padding: 0;
            .font-SC();
            font-size: 12px;
            color: #999;
            line-height: 22px;
        }
        /deep/.van-cell:not(:last-child)::after{
            display: none;
        }
        /deep/.van-cell__value{
            .font-SC();
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

        .changestatus{
            /deep/.van-cell{
                padding: 0;
                .font-SC();
                font-size: 15px;
                color: #999;
                line-height: 32px;
            }
            /deep/.van-cell:not(:last-child)::after{
                display: none;
            }
            /deep/.van-cell__value{
                .font-SC();
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
        }

        p{
            border-bottom: 1px solid #efefef;
            margin-top: 15px;
        }
        .btn-group{
            width: 100%;
            height: 20px;
            .jumptufill{
                display: inline-block;
                width: 60px;
                height: 20px;
                .font-SC();
                font-size: 12px;
                color: #fff;
                text-align: center;
                float: right;
                background-color: #000;
                line-height: 20px;
                border-radius: 5px;
                margin-top: 10px;
            }
            .jumptufill-999{
                color: #999;
                background-color: #fff;
                border:1px solid #efefef;
            }
        }
    }

    .reject-template{
        width: 100%;
        height: auto;
        padding: 15px;
        background-color: #fff;
        margin-top: 10px;
        h4{
            .font-SC();
            font-weight: bold;
            font-size: 15px;
            color: #333;
        }
        .reject-cause{
            width: 100%;
            height: 116px;
            overflow-y: auto;
            border: 1px solid #e6e6e6;
            .font-SC();
            font-size: 12px;
            color: #999;
            padding: 10px;
        }
    }

}
</style>